<template>
  <view class="sign-in">
    <view class="sign-in-row-group">
      <view class="sign-in-row">
        <text>会议编号</text>
        <text>{{ detail.meetingCode | empty }}</text>
      </view>
      <view class="sign-in-row">
        <text>会议时间</text>
        <text>{{ meetingTime(detail.meetingTime) | empty }}</text>
      </view>
    </view>
    <view class="sign-in-container">
      <view :class="['sign-in-container-w',{'sign-in-container-disabled':isBefore}]"></view>
      <view :class="['sign-in-container-n',{'sign-in-container-disabled':isBefore}]"  @click="handleSignIn">
        <text>签到</text>
        <text>{{ diffTime }}</text>
      </view>
      <!-- <view class="sign-in-container-location">
        <image src="/static/images/team-or-group/icon-location.png" />
        <text>--</text>
      </view> -->
    </view>
  </view>
</template>

<script>
import { detail ,signIn} from '@/api/duty-basic/duty-meeting'
import dayjs, { unix } from 'dayjs';
const utc = require("dayjs/plugin/utc");
dayjs.extend(utc)

// 15分钟之前不能签到
const beforeTime = 15
let timer = null
export default {
  name: "SignIn",
  data() {
    return {
      isOver: true,
      diffTime: '00:00:00',
      detail: {},
      endTime:new Date(),
      meetingId:'',
      procTaskId:''
    }
  },
  methods: {
    // 开始倒计时
    startCountDown() {
      if (timer) this.clearTimer()
      timer = setInterval(() => {
        if (+new Date() >= +dayjs(this.endTime)) {
          this.isOver = true
          this.clearTimer()
        } else {
          const diff = dayjs((+dayjs(this.endTime)) - (+new Date()))
          this.diffTime = dayjs(diff).utc().format('HH:mm:ss')
          this.isOver = false
        }
      }, 1000)
    },
    clearTimer() {
      clearInterval(timer)
      timer = null
    },
    async getDetail(id) {
      const { data = {} } = await detail(id)
      this.detail = data
      if(data.meetingTime) {
        this.endTime = data.meetingTime || new Date()
        this.startCountDown()
      }
    },
    async handleSignIn(){
      if(this.isBefore) return uni.showToast({
        title:`签到时间为会议开始前${beforeTime}分钟`,
        icon:'none'
      })

      if(!this.canSignIn) return uni.showToast({
        title:`当前已过签到时间`,
        icon:'none'
      })
      
      await signIn({meetingId:this.meetingId,procTaskId:this.procTaskId})
      uni.showToast({title:'签到成功!',icon:'none'})
      uni.navigateBack()
    },
  },
  computed: {
    meetingTime(){
      return function(time){
        return time ? dayjs(time).format('YYYY/MM/DD HH:mm') : time
      }
    },
    canSignIn(){
      if(this.isOver) return false
      if(!this.endTime) return false 
      if(this.isBefore) return false
      return true
    },
    isBefore(){
      return dayjs().isBefore(dayjs(this.endTime).subtract(beforeTime,'minute'))
    }
  },
  filters: {
    empty(val) {
      return val || '--'
    }
  },
  onLoad({ id ,procTaskId}) {
    id && this.getDetail(id)
    this.meetingId = id
    this.procTaskId = procTaskId
  },
  onShow() {
    this.startCountDown()
    // uni.getLocation({
    //   geocode: true,
    //   isHighAccuracy: true,
    //   success: (res) => {
    //     console.log('res', res);
    //   },
    //   fail(err) {
    //     console.log('err', err);
    //   }
    // });
  },
  onHide() {
    this.clearTimer()
  },
  onUnload() {
    this.clearTimer()
  }
}
</script>

<style lang='scss' scoped>
.sign-in-row-group {
  width: 690rpx;
  background: #fff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  margin: 0 auto;
  margin-top: 30rpx;
  font-size: 32px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  padding: 0 30rpx;
  box-sizing: border-box;

  .sign-in-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #D5D7E3;
  }

  .sign-in-row:last-child {
    border: 0;
  }

  .sign-in-row text:last-child {
    color: #333333;
    display: inline-block;
    position: relative;
    width: 500rpx;
    text-align: right;
    @include text-overflow-ellipsis(1);
  }
}

.sign-in-container {
  width: 690rpx;
  height: 742rpx;
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  margin: 0 auto;
  margin-top: 30rpx;
  overflow: hidden;
  position: relative;

  .sign-in-container-w {
    width: 324rpx;
    height: 324rpx;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(180deg, #E2A468 0%, #C87C32 100%);

    opacity: 0.1;
    margin-top: 114rpx;
  }

  .sign-in-container-n {
    width: 292rpx;
    height: 292rpx;
    background: linear-gradient(180deg, #E2A468 0%, #C87C32 100%);
    position: absolute;
    opacity: 1;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    top: 130rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #E5C7A9;
    font-size: 36rpx;
    font-weight: 400;
    font-family: PingFang SC-Regular, PingFang SC;
  }

  .sign-in-container-n text:first-child {
    font-size: 48rpx;
    color: #FFFFFF;
  }

  .sign-in-container-disabled,.sign-in-container-disabled text
  {
    background: #f3d19e;
    color: #fff;
  }

  .sign-in-container-location {
    display: flex;
    align-items: center;
    margin-top: 34rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
    justify-content: center;

    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 5rpx;
    }
  }
}
</style>
